React의 리렌더링

❓질문

React의 리렌더링 과정에 대해 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

첫번째로 리액트의 state나 props가 변경된다면 리액트가 이를 감지합니다.
그렇다면 리액트가 새로운 버츄얼돔을 만들어 이전 버츄얼돔과 이를 비교하여 어떠한 부분이 바뀌는지 분석하고 이를 표시합니다.
마지막으로 커밋단계에서 이 바뀐 부분을 실제 돔에 반영하여 업데이트합니다.

🏫 정리한 내용

React의 리렌더링 과정은 크게 Trigger, Render, Commit이라는 세 단계로 나눌 수 있습니다.

먼저 Trigger 단계는 컴포넌트의 state나 props가 변경되면서 시작됩니다. 사용자의 입력, 네트워크 응답 등의 이벤트에 의해 상태가 변경되면 React는 해당 컴포넌트를 다시 렌더링해야 한다고 판단합니다. 이때 React는 내부적으로 업데이트 큐에 해당 변경 사항을 등록합니다.

그다음 Render 단계에서는 변경된 상태를 바탕으로 새로운 Virtual DOM 트리를 생성합니다. 그후, 이전 Virtual DOM과 새 Virtual DOM을 비교하여 어떤 부분이 바뀌었는지를 분석합니다. 중요한 점은 이 시점에서는 실제 DOM에는 아무런 변경도 일어나지 않는다는 사실입니다.

마지막으로 Commit 단계에서는 이전 단계에서 분석된 변경 사항을 실제 DOM에 반영합니다. React는 변경에 필요한 최소한의 작업을 적용하여 DOM을 업데이트합니다. 변경이 발생하지 않은 요소는 수정하지 않고 그대로 둡니다. 이 단계에서 사용자에게 화면의 변화가 실제로 나타나게 됩니다.